<template>
  <div class="particle">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
    ><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
    ><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
</template>

<script>
export default {
  name: 'Particle'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 动画宽度
$VIEW_WIDTH: 10;

// 动画高度
$VIEW_HEIGHT: 4;

// 粒子飘动速度
$ANIMATION_SPEED: 3;

.particle {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);

  i {
    &:before,
    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      background: radial-gradient(
        #fffbef,
        #fffbef 10%,
        rgba(255, 255, 255, 0) 56%
      );
      border-radius: 50%;
      content: "";
      opacity: 0;
    }
  }
}

@for $i from 1 through 10 {
  .particle {
    i:nth-child(#{$i}) {
      &:before {
        $w: #{random(5) + 2}px;
        width: $w;
        height: $w;
        animation: p#{$i}
          #{random(5) *
          0.2 +
          $ANIMATION_SPEED}s
          #{random(10) *
          0.6}s
          infinite;
      }

      &:after {
        $w: #{random(6) + 3}px;
        width: $w;
        height: $w;
        animation: p#{$i}
          #{random(5) *
          0.5 +
          $ANIMATION_SPEED}s
          #{random(20) *
          0.6}s
          infinite;
      }
      @keyframes p#{$i} {
        0% {
          transform: translate3d(
            #{(random($VIEW_WIDTH)) * (random(2) * 2-3)}px,
            0vh,
            0
          );
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        100% {
          transform: translate3d(
              #{(random($VIEW_WIDTH)) * (random(2) * 2-3)}px,
              -#{$VIEW_HEIGHT}vh,
              0
            )
            scale(#{(random(1))});
          opacity: 0;
        }
      }
    }
  }
}
</style>